<template>
    <BPTable ref='tableRef' align='center' row-key='id' name-key='name' :columns='columns' :api='pageApi' :buttons='buttons'>
        <template #status="{record}">
            <a-tag v-if="record.status == 0">待审核</a-tag>
            <a-tag color="success" v-else-if="record.status == 1">已通过</a-tag>
            <a-tag color="error" v-else-if="record.status == 2">已驳回</a-tag>
        </template>

        <template #$action="{record}">
            <template v-if="record.status == 0">
                <BTextButton type="primary" @click="passSubmit(record)">通过</BTextButton>
                <BTextButton @click="refuse(record, record.id)">驳回</BTextButton>
            </template>
        </template>
    </BPTable>


    <BDialog v-model:visible='refuseVisible' title="驳回" width='500px' :confirm='refuseSubmit'>
        <a-textarea placeholder="驳回原因" v-model:value="refuseReason" />
    </BDialog>

    <BDrawer v-model:visible='visible' title='详情' width='600px'>
        <Detail :row="currentRow" />
    </BDrawer>

    
</template>

<script lang='ts' setup>
    import { pageApi, passApi, refuseApi } from '@/api/Xyxuntou'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { parseTime } from '@/utils'

    import Detail from './detail.vue'



    const i18n = useI18nStore()

    const visible = ref(false)
    

    const tableRef = ref()

    const currentRow = ref<any>()
    const currentCategory = ref()

    function onChangeCategory(e) {
        currentCategory.value = e
        tableRef.value.load()
    }


    const refuseVisible = ref(false)
    const refuseReason = ref<string>('')
    const currentId = ref(0)

    function refuse(row,id) {
        currentRow.value = row
        currentId.value = id
        refuseReason.value = ''
        refuseVisible.value = true
    }

    async function refuseSubmit() {
        const r = await refuseApi(currentId.value, refuseReason.value)
        if(r.success) {
            currentRow.value.status = 2
            currentRow.value.reason = refuseReason.value
            //tableRef.value.reload()
            message.success('驳回成功')
            refuseVisible.value = false
        }else {
            message.error(r.msg)
        }
    }

    async function passSubmit(record) {
        Modal.confirm({
            title : '确定通过吗',
            async onOk() {
                const r = await passApi(record.id)
                if(r.success) {
                    record.status = 1
                    message.success('通过成功')
                }else {
                    message.error(r.msg)
                }
            }
        })
    }


    const buttons = ref<SearchButton[]>([])

    


    const columns = ref<Column[]>([
        {
            title : '项目名称',
            dataIndex : 'name',
        },

        {
            title : "状态",
            dataIndex : 'status',
            // customRender({record}) {
            //     return WATER_TEST_STATUS[record.status]
            // },
            
            inSearch : true,
            type : 'select',
            options : [{label : '待审核', value: 0}, {label:'已通过', value:1}, {label:'已拒绝', value:2}],
            transform(value) {
                return Number(value)
            },
        },


        {
            title : '原因',
            dataIndex : 'reason',
        },

        {
            title : "申请时间",
            dataIndex : 'createTime',
            align : 'center',
            customRender({record}) {
                return parseTime(record.createTime)
            },
        },

        {
            title : i18n.t('operation'),
            dataIndex : '$action',
            align : 'center',
           $detail(row) {
                currentRow.value = row
                visible.value = true
           }
        }

    
    ])


    
</script>

